<template>
	<view class="">
			<f-navbar title="校园服务" fontColor="#ffffff" bgColor="#ffa200" :scrollTop="scrollTop" navbarType='0'></f-navbar>
		<view class="">
			<input type="text" class="inputBox" placeholder="  请输入信息" style="margin-left: 40rpx;">
		</view>
		<view class="">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true">
				<swiper-item v-for="(item,index) in bannerList">
					<image class="images" style="width: 100%;" mode="widthFix" :src="item.image"></image>
				</swiper-item>
			</swiper>

		</view>
		<view class="nav-list">
			<view class="item" v-for="(item,index) in itemList" @click="onJump(item.url)">
				<image :src="item.image" mode=""></image>
				<view class="">
					{{item.name}}
				</view>
			</view>
		</view>

		<!-- 广告栏展示 -->
		<view class="min-width" style="margin-left: 35rpx;">
			<view class="flex imgBox">
				<view class="imgBoxleft">
          	   <image src="../../static/ggw.png" mode="widthFix" style="width: 100%;"></image>
				</view>

				<view class="imgBoxRight">
                  
					<view class="imgleft bbqImg"   @click="onJump('../confessionWall/index')">
                    <image src="../../static/school/bbq.jpeg" mode="widthFix" style="width: 100%;margin-top: -20rpx;"></image>
					</view>

					<view class="imgleft skill bbqImg" style="margin-top: 10rpx;">
						   <image src="../../static/mhjy.png" mode="widthFix" style="width: 100%;margin-top: 0rpx;"></image>
					</view>

				</view>
			</view>

			<view class="flex" style="margin-top: 20rpx;">
				<view class="btnBox skill" >
                   	   <image src="../../static/school/chwl.png" mode="widthFix" style="width: 119%;margin-left: -10rpx;"></image>
				</view>

				<view class="btnBox skill" @click="onJump('./resourceCommunity/resourceCommunity')">
                      <image src="../../static/school/sqyx.png" mode="widthFix" style="width: 119%;margin-left: -20rpx;"></image>
				</view>

				<view class="btnBox skill" @click="onJump('../promotion/promotion')">
					 <image src="../../static/school/tgzq.jpg" mode="widthFix" style="width: 120%;margin-left:-20rpx;margin-top:-20rpx;"></image>
				</view>
			</view>

		</view>

		<!-- 最新发布展示 -->
		<view class=""  style="margin-top: 30rpx;">


				
						<schoolTabs></schoolTabs>


	
		</view>

		<!-- 发布按钮 -->
		<view class="btnRelease" @click="onJump('../index/release')">
			发布+
		</view>
	</view>
</template>

<script>
	import schoolTabs from '@/components/schoolTabs/schoolTabs.vue'
	export default {
		components: {
			schoolTabs
		},
		data() {
			return {
				typeList: [{
						name: '全部',
					}, {
						name: '待审核',
					}, {
						name: '待发布',
					},
					{
						name: '审核失败',
					},
					{
						name: '已发布',
					}
				],
				bannerList: [{
						image: "../../static/other/1.png"
					},
					{
						image: "../../static/other/2.png"
					}
				],
				itemList: [{
						image: '../../static/projectIcon/1.jpg',
						name: '校园跑腿',
						url: ''
					},
					{
						image: '../../static/projectIcon/1.jpg',
						name: '低价快递',
						url: ''
					},
					// {
					// 	image: '../../static/projectIcon/1.jpg',
					// 	name: '兼职全职',
					// 	url: 'fullTime'
					// },
					{
						image: '../../static/projectIcon/1.jpg',
						name: '校园服务',
						url:'localService'
					},
					{
						image: '../../static/projectIcon/1.jpg',
						name: '二手集市',
						url: ''
					},
					{
						image: '../../static/projectIcon/1.jpg',
						name: '校园社团 ',
						url: 'massOrganizations/massOrganizations'
					},

					{
						image: '../../static/projectIcon/1.jpg',
						name: '技能工具',
						url: ''
					},
					{
						image: '../../static/projectIcon/1.jpg',
						name: '勤工俭学',
						url: ''
					},
					// {
					// 	image: '../../static/projectIcon/1.jpg',
					// 	name: '美容美妆',
					// 	url: ''
					// },
					{
						image: '../../static/projectIcon/1.jpg',
						name: '校园问答',
						url: 'help'
					}
				]


			}
		},
		onLoad() {

		},
		methods: {

			onJump(url) {
				uni.navigateTo({
					url: url
				})
			}
			

			
			


		}
	}
</script>

<style lang="scss" scoped>
	.min-width {
		width: 680rpx;
		margin: 0 auto;
	}

	.inputBox {
		width: 650rpx;
		height: 50rpx;
		background-color: #ececec;
		border-radius: 50rpx;
		margin: 30rpx auto;
		font-size: 26rpx;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.imgBoxleft {
		 width: 50rpx;
		 overflow: hidden;

	}

	.nav-list {
		padding: 30rpx 0 0 0;
		// margin: 4rpx 0 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	    width: 680rpx;
		background-color: #f4f4f4;
		margin-left: 35rpx;
	    margin-bottom: 30rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 20%;
            margin-bottom: 30rpx;
			image {
				width: 42rpx;
				margin: 0 auto;
				height: 42rpx;
			}

			view {
				font-size: 22rpx;
				color: #555;
				white-space: nowrap;
				margin-top: 16rpx;
			}
		}

		// .item:nth-child(n+5) {
		// 	margin-top: 30rpx;
		// }
	}

	.swiper {
		margin-top: 30rpx;
		height: 240rpx;

	}

	.imgBoxleft {
		width: 60%;
		height: 210rpx;
		background-color: #0c5546;
		border-radius: 10rpx;
	}

	.imgBoxRight {
		width: 48%;
		height: 210rpx;
		// background-color: #21bedd;

	}

	.imgleft {
		width: 90%;
		height: 100rpx;
		background-color: #dd06d3;
		margin-left: 10%;
		border-radius: 10rpx;
	}

	.imgRight {
		width: 48%;
		height: 100rpx;
		background-color: #dd06d3;
		border-radius: 10rpx;
	}

	.titleBox {
		text-align: center;
		height: 100rpx;
		background-color: #dd06d3;
		margin-top: 10rpx;
		line-height: 100rpx;

	}

	.imgBox {
		/* width: 650rpx;
		margin: 0 auto; */
	}

	.btnBox {
		width: 200rpx;
		height: 100rpx;
		background-color: #0c5546;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.btnRelease {
		width: 90rpx;
		height: 90rpx;
		background-color: #ff9500;
		border-radius: 50rpx;
		color: #ececec;
		line-height: 90rpx;
		text-align: center;
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		font-size: 20rpx;
		z-index: 999;
			box-shadow: #5e5e5e 0 5rpx 10rpx;
		
	}
	
	.bbqImg{
		overflow: hidden;
	}
	
	.skill{
		line-height: 90rpx;
		text-align: center;
		color: #ffffff;
	}

</style>